<%-- 
    Document   : login
    Created on : 29 janv. 2012, 22:06:21
    Author     : bello
--%>
<%String base = request.getContextPath();%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Doodle Identification</title>
        <link href="<%=base%>/css/login.css" type="text/css" rel="stylesheet" />
        <link href="<%=base%>/js/plugins/jquery/css/jquery-ui-1.8.17.custom.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="<%=base%>/js/plugins/jquery/js/jquery-1.7.1.min.js" ></script>
        <script type="text/javascript" src="<%=base%>/js/plugins/jquery/js/jquery-ui-1.8.17.custom.min.js" ></script>

    </head>
    <body>
        <script>
            $(function() {
                $( "input:submit, a, button", "#loginSubmit" ).button();
                $( "a", "#loginSubmit" ).click(function() { return false; });
            });
        </script>
        <div id="dialog_login">
            <h1>Connexion</h1>
            <% if (request.getParameter("error") != null)
                {%>
            <div id="formErrors">Login et/ou mot de passe incorrect ! ( <%=request.getParameter("error")%>) </div>
            <% }%>
            <form action="j_security_check" method="POST" name="loginForm">
                <div class="loginDiv">
                    <div class="loginInlineDiv">
                        <label for="loginUsername">Utilisateur :</label> 
                        <div class="bubbleInfo">
                            <div>
                                <img class="trigger" src="<%=base%>/img/help.png" />
                            </div>
                            <table id="dpop" class="popup">
                                <tbody><tr>
                                        <td id="topleft" class="corner"></td>
                                        <td class="top"></td>
                                        <td id="topright" class="corner"></td>
                                    </tr>

                                    <tr>
                                        <td class="left"></td>
                                        <td><table class="popup-contents">
                                                <tbody>
                                                    <tr>
                                                        <th>Aide : </th>
                                                        <td>Identifiant sous la forme nom.prenom</td>
                                                    </tr>
                                                </tbody></table>

                                        </td>
                                        <td class="right"></td>    
                                    </tr>

                                    <tr>
                                        <td class="corner" id="bottomleft"></td>
                                        <td class="bottom"><img width="30" height="29" alt="popup tail" src="<%=base%>/img/bubble/bubble-tail2.png"/></td>
                                        <td id="bottomright" class="corner"></td>
                                    </tr>
                                </tbody></table>
                        </div>
                    </div>
                    <div class="clean"></div>
                    <input id="loginUsername" type="text" size="18" name="j_username" />
                </div> 
                <div class="clean"></div>
                <div class="loginDiv">
                    <label for="loginPassword">Mot de passe :</label>
                    <input id="loginPassword" type="password" size="18" name="j_password" />
                </div>
                <div id="loginSubmit">
                    <input type="submit" value="Connexion" />
                </div>
                <div class="loginDiv">
                    <a id="loginLink" href="./inscription.jsp">Créer un compte</a>
                </div>
                <div class="clean"></div>
            </form>
        </div>

        <script type="text/javascript">
            $(function () {
                $('.bubbleInfo').each(function () {
                    // options
                    var distance = 10;
                    var time = 250;
                    var hideDelay = 500;

                    var hideDelayTimer = null;

                    // tracker
                    var beingShown = false;
                    var shown = false;

                    var trigger = $('.trigger', this);
                    var popup = $('.popup', this).css('opacity', 0);

                    // set the mouseover and mouseout on both element
                    $([trigger.get(0), popup.get(0)]).mouseover(function () {
                        // stops the hide event if we move from the trigger to the popup element
                        if (hideDelayTimer) clearTimeout(hideDelayTimer);

                        // don't trigger the animation again if we're being shown, or already visible
                        if (beingShown || shown) {
                            return;
                        } else {
                            beingShown = true;

                            // reset position of popup box
                            popup.css({
                                top: -100,
                                left: -33,
                                display: 'block' // brings the popup back in to view
                            })

                            // (we're using chaining on the popup) now animate it's opacity and position
                            .animate({
                                top: '-=' + distance + 'px',
                                opacity: 1
                            }, time, 'swing', function() {
                                // once the animation is complete, set the tracker variables
                                beingShown = false;
                                shown = true;
                            });
                        }
                    }).mouseout(function () {
                        // reset the timer if we get fired again - avoids double animations
                        if (hideDelayTimer) clearTimeout(hideDelayTimer);

                        // store the timer so that it can be cleared in the mouseover if required
                        hideDelayTimer = setTimeout(function () {
                            hideDelayTimer = null;
                            popup.animate({
                                top: '-=' + distance + 'px',
                                opacity: 0
                            }, time, 'swing', function () {
                                // once the animate is complete, set the tracker variables
                                shown = false;
                                // hide the popup entirely after the effect (opacity alone doesn't do the job)
                                popup.css('display', 'none');
                            });
                        }, hideDelay);
                    });
                });
            });
        </script>                        
    </body>
</html>
